<script setup>
import * as Cesium from 'cesium'
import { viewerOptions, initMap } from '@/cesium/config'

import { storeToRefs } from 'pinia'
import useMapStore from '@/stores/modules/map'

const mapStore = useMapStore()
const { viewer } = storeToRefs(mapStore)

onMounted(() => {
  viewer.value = new Cesium.Viewer('CesiumMap', viewerOptions)
  initMap(viewer.value)
})
</script>

<template>
  <div id="CesiumMap" class="map"></div>
</template>

<style lang="less" scoped>
.map {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  position: relative;
  height: calc(100vh - 90px);
  min-height: 660px;
}
</style>
